<template>
  <div id="index_id">
    <!-- <el-carousel>
      <el-carousel-item v-for="item in index_list" :key="item.id">
        <img width="100%" height="100%" :src="'http://127.0.0.1:3000/'+item.img" alt />
      </el-carousel-item>
    </el-carousel> -->
    <div id="panel" style="width:100%; height:400px "></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import { mapActions, mapMutations, mapState } from "vuex";
export default {
  created() {
    this.IndexActions();
  },
  computed: {
    ...mapState({ index_list: state => state.IndexStore.index_list })
  },
  methods: {
    ...mapActions("IndexStore", ["IndexActions"]),
    ...mapMutations("IndexStore", ["IndexMutations"])
  },
  mounted() {
    const myChart = echarts.init(document.querySelector("#panel"));
    var option = (option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line"
        }
      ]
    });
    myChart.setOption(option)
  }
};
</script>

<style>
</style>